import React from 'react';
import ReactDOM from 'react-dom';

class Mouse extends React.Component { 
  state = { 
    x: 0,
    y: 0
  }
	componentDidMount(){
    document.addEventListener('mousemove', (e)=>{
      const { x, y } = e
      this.setState({x, y})
    })
  }

  render () {
    if(this.props.render) {

      return this.props.render(this.state)
    } else {
      return this.props.children(this.state)
    }
    // <h1>{this.state.x} - {this.state.y}</h1>
  }
} 

ReactDOM.render(<div>
  <Mouse>{({x,y})=><p>{x}-{y}</p>}</Mouse>
</div>, 
document.getElementById('root')) 


// ReactDOM.render(<div>
//   <Mouse render={({x,y})=>{return (<h1>{x}-{y}</h1>)} } />
// </div>, 
// document.getElementById('root')) 